<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function fun1(obj) 
        {
            var xhr = new XMLHttpRequest();//创建一个对象
            var url = "";
            xhr.open("post", url, true);
            if (obj == 'opt1_on') 
            {
                console.log("led灯已开启");
            }
            else if (obj == 'opt1_off') 
            {
                console.log("led灯已关闭");
            }
            xhr.send(obj);//发送请求正文

        }
        function fun2(obj) 
        {
            var xhr = new XMLHttpRequest();//创建一个对象
            var url = "";
            xhr.open("post", url, true);
            if (obj == 'opt2_on') 
            {
                console.log("蜂鸣器已开启");
            }
            else if (obj == 'opt2_off') 
            {
                console.log("蜂鸣器已关闭");
            }
            xhr.send(obj);//发送请求正文
        }
        function getinfo()
        {
            // 获取标签名为usrname的标签，赋值给v
            var v = document.getElementsByName("usrname");
            
            console.log(v[0].value);  // v[0].value = "hello";
            var xhr = new XMLHttpRequest();//创建一个对象
            var url = "";
            xhr.open("post", url, true);

            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200)//请求完成且成功
                {
                    v[0].value = xhr.responseText;//响应正文
                }
            };
            xhr.send("get");//发送请求正文
        }

    </script>
</head>

<body>
    <h1>设备数据采集和设备控制</h1>
    <div style="color: blue;background-color: aqua;">
        光线/加速度(x/y/z):<input type="text" name="usrname" value="data">
        <input type="button" name="falsh" value="刷新" onclick="getinfo()">
        <br>
        led灯:
        开:
        <input type="radio" name="opt1" id="opt1_on" onclick="fun1(id)">
        关:
        <input type="radio" name="opt1" id="opt1_off" checked="checked" onclick="fun1(id)">
        <br>
        蜂鸣器:
        开:
        <input type="radio" name="opt2" id="opt2_on"  onclick="fun2(id)">
        关:
        <input type="radio" name="opt2" id="opt2_off" checked="checked" onclick="fun2(id)">
    </div>
</body>

</html>